{include file='/public/index-header'}
<body>
    {include file='/public/index-nav'}
    <div class="layui-container ws-container">
        <div class="layui-row" style="margin: 60px 0px;">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <h3>我的成绩</h3>
                    </div>
                    <div class="layui-card-body">
                        <table id="achievement_list" class="layui-table" lay-filter="achievement_list"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {include file='/public/index-foot'}
</body>

<div class="layui-hide" id="detail_info">
    <div class="layui-panel">
        <div style="padding: 32px;">
            <div class="layui-card">
                <div class="layui-card-header">
                    <h3 name="title"></h3>
                </div>
                <table id="achievement_detail_list" class="layui-table" lay-filter="achievement_detail_list"></table>
            </div>
        </div>
    </div>
</div>

<style type="text/css">

</style>
<script type="text/html" id="button-tool">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">明细</a>
    </div>
</script>
<script type="text/javascript" >
    $(function () {
        layui.use(['table', 'util', 'layer'], function () {
            let table = layui.table;
            let util = layui.util;
            // 渲染
            table.render({
                elem: '#achievement_list',method:'post',skin: 'nob',css:'.layui-border-box {border: none;}',totalRow: true, // 开启合计行
                url:'{:sysuri("getlist")}',page:{layout:['count','prev','page','next','skip'], theme:'#1e9fff'},
                // 将原始数据解析成 table 组件所规定的数据格式
                parseData: function(res){
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.info, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.items //解析数据列表
                    };
                },
                cols: [[
                    {field:'course_name', title:'{:lang("课程名称")}', minWidth:200},
                    {field:'class_name', title:'{:lang("班级")}', minWidth:200},
                    {field:'teacher_name', title:'{:lang("老师")}', minWidth:200,totalRow: '合计：'},
                    // {field:'total_total_gold', title:'{:lang("总分数")}', minWidth:150,sort: true,totalRow:true},
                    {field:'total_task_score', title:'{:lang("课程总分数")}', minWidth:150,sort: true,totalRow:true},
                    {field:'total_employ_gold', title:'{:lang("实战分数")}', minWidth:150,sort: true,totalRow:true},
                    {field:'total_task_gold', title:'{:lang("学习分数")}', minWidth:150,sort: true,totalRow:true},
                    {fixed: 'right', title:'操作', minWidth: 100, templet: '#button-tool'}
                ]],
                done: function(res, curr, count){
                    $('th').css({'background-color': '#f6f7f9', 'font-weight':'bold'})
                }
            });

            table.on('tool(achievement_list)', function (obj) {
                let data = obj.data; // 得到当前行数据
                let layEvent = obj.event; // 获得元素对应的 lay-event 属性值
                switch (layEvent) {
                    case 'detail':
                        layer.open({
                            type: 1, // page 层类型
                            title: '成绩明细',
                            area: ['800px', '600px'],
                            shade: 0.6, // 遮罩透明度
                            shadeClose: true, // 点击遮罩区域，关闭弹层
                            anim: 0, // 0-6 的动画形式，-1 不开启
                            content: $('#detail_info').html(),
                            btn: ['{:lang("确认")}','{:lang("关闭")}'],btnAlign: 'c',
                            success: function(layero, index, that){
                                $('h3[name=title]').html(data.class_name+'-'+data.course_name)
                                table.init('achievement_detail_list',{
                                    method:'post',skin: 'nob',width:'760px',totalRow: true, // 开启合计行
                                    url:'{:sysuri("detail")}',where:{task_id:data.task_id,cl_id:data.class_id},
                                    page:{layout:['count','prev','page','next','skip'], theme:'#1e9fff'},
                                    // 将原始数据解析成 table 组件所规定的数据格式
                                    parseData: function(res){
                                        return {
                                            "code": res.code, //解析接口状态
                                            "msg": res.info, //解析提示文本
                                            "count": res.data.total, //解析数据长度
                                            "data": res.data.items, //解析数据列表
                                            'classInfo':res.data.class_info //解析其他字段
                                        };
                                    },
                                    cols: [[
                                        {field:'chapter_name', title:'{:lang("内容名称")}', minWidth:200},
                                        {field:'chapter_pid_name', title:'{:lang("所属章节")}', minWidth:200,totalRow: '合计：'},
                                        // {field:'total_gold', title:'{:lang("总分数")}', minWidth:130,sort: true,totalRow:true},
                                        {field:'employ_gold', title:'{:lang("实战分数")}', minWidth:150,sort: true,totalRow:true},
                                        {field:'task_gold', title:'{:lang("学习分数")}', minWidth:180,sort: true,totalRow:true},
                                    ]],
                                    done: function(res, curr, count){
                                        $('.layui-table-header tr').css({'background-color': '#f6f7f9', 'font-weight':'bold'})
                                    }
                                })
                            }
                        });
                        break;
                
                    default:
                        break;
                }
            });
        })
    })
</script>